<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search v-model="value" input-align='center' placeholder="请输入搜索关键词" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in images" :key="index">
        <img :src="item.image_url" class="swiperImg">
      </van-swipe-item>
    </van-swipe>
    <!-- 九宫格 -->
    <van-grid :column-num='5' >
      <van-grid-item icon="photo-o" :text="item.name" v-for='(item,index) in channel' :key='index'/>
    </van-grid>
    <van-grid :column-num='5' >
      <van-grid-item icon="photo-o" :text="item.name" v-for='(item,index) in channel' :key='index'/>
    </van-grid>

    <!-- 品牌制造商 -->
    <div class="brand">
      <van-panel title="品牌制造商直供">
          <van-grid :column-num="2">
            <van-grid-item v-for='(item1, index) in brandList' :key='index' class="brandItem">
              <van-image :src="item1.new_pic_url" />
              <h4 class="title" >{{item1.name}}</h4>
             <p class="price">{{item1.floor_price}}元起</p>
            </van-grid-item>
          </van-grid>
      </van-panel>
    </div>

    <!-- 新品首发 -->
    <div class="newgoods">
      <van-panel title="品牌制造商直供">
          <van-grid :column-num="2">
            <van-grid-item v-for='(item2, index) in newGoodsList' :key='index'>
              <van-image :src="item2.list_pic_url" />
              <h4 class="title new-tl" >{{item2.name}}</h4>
              <p class="price new-pr">{{item2.retail_price}}元起</p>
            </van-grid-item>
          </van-grid>
      </van-panel>
    </div>

    <!-- 人气面板 -->
    <div class="hotlist">
        <van-panel title="人气推荐">
          <van-card v-for='item in hotGoodsList' :key='item.id'
              :price="item.retail_price"
              :desc="item.goods_brief"
              :title="item.name"
              :thumb="item.list_pic_url"
            />
        </van-panel>
    </div>

    <!-- 底部tarbar -->
    <tar-btn></tar-btn>
  </div>
</template>

<script>
// @ is an alias to /src
import tarBtn from '../components/tar-btn.vue'
import axios from 'axios'
import api from '../assets/config/api'

export default {
  name: 'Home',
  data() {
    return {
      value:'',
      images:[],
      channel:[],
      brandList:[],
      newGoodsList:[],
      hotGoodsList: []
    }
  } ,
  async mounted() {
   let res = await axios.get(api.IndexUrl)
    console.log(res.data)
    let data = res.data.data;
    //轮播图
    this.images = data.banner
    //九宫格
    this.channel = data.channel
    //品牌制作商
    this.brandList = data.brandList
    // newGoods
    this.newGoodsList= data.newGoodsList
    // hotGoodsList
    this.hotGoodsList = data.hotGoodsList
    console.log(this.hotGoodsList)
  },
  components:{
    tarBtn
  }
}
</script>
<style lang="less" scoped>
  .home{
    overflow:hidden;
  }
  .my-swipe{
    width: 100%;
    height: 200px;
    .swiperImg{
      width: 100%;
    }
  }
  .van-cell__title{
    text-align:center;
  }
  .brand{
    .brandItem{
      padding: 0!important;
      .title{
        position: absolute;
        top: 20px;
        left: 10px;
       
      }
      .price{
        position: absolute;
        top: 40px;
        left: 10px;
        font-size: 14px;
        color:#999 ;
      }
    }
  }
.newgoods{
  .new-tl{

    font-size:16px;
    color: #2c3e50;
  }
  .new-pr{
       font-size:14px;
        color:#999;
  }
}
.hotlist{
      .van-card__content{
        justify-content: center;
        text-align:left;
      }
      .van-card__title{
        font-weight: 900;
        color: #333;
        font-size: 14px;
        padding: 5px 0;
      }
      .van-card__price{
        color: red;
      }  
 } 
  .tarbar{
    margin-top:50px;
  }

</style>

